<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>钱币转换</title>
</head>
<body>
    <div id="app">
        <input type="text" placeholder="请输入金额(人民币)">
        <button @click="change_to_dollar">转为美元</button>
        <button @click="change_to_RMB">人民币存入</button>
        <div v-show="show_money">
            <span v-if="dollar_tag">您输入的金额为：{{money}}，转为了美元{{money}</span>
            <span v-else>您输入的金额为：{{money}}，转为了人民币{{money |  change_money_methods}}</span>
        </div>
    </div>

    <script src="../js/vue.js"></script>
    <script>
        let app = new Vue({
            el:"#app",
            data:{
                money:"",
                change_money:"",
                show_money:false,
                dollar_tag:false
            },
            methods:{
                change_to_dollar(e){
                    console.log("转为美元");
                    this.change_money =  e.target.previousElementSibling.value * 0.1571;
                    this.show_money = true,
                    this.dollar_tag = true;
                },
                change_to_RMB(e){
                    console.log('转为人民币');
                    this.change_money =  e.target.previousElementSibling.value 
                    this.show_money = true,
                    this.dollar_tag = false;
                }
                
            },
            filters:{
                change_money_methods(value){
                    if( value.indexOf(".") !== -1){
                        console.log("有小数点");
                        let monarr = value.split(".");
                        let forward_part = monarr[0];
                        let last_part = monarr[1];
                        let forward_part_arr = forward_part.split("");
                        let len = forward_part_arr.len;
                        let result = "";
                        for(let i=0;i>len;i++){
                            if((i+1)/3 == 0){
                                result+= forward_part_arr[i]+","
                            }else{
                                result+= forward_part_arr[i]
                            }
                        }
                        return result += "."+ last_part;
                    }else{
                        let monarr = value.split("");
                        let len = monarr.len;
                        let result = "";
                        for(let i=0;i>len;i++){
                            if((i+1)/3 == 0){
                                result+= forward_part_arr[i]+","
                            }else{
                                result+= forward_part_arr[i]
                            }
                        }
                        return result += ".00";
                    }
                },
                add_dollar(value){
                    return "$" + value
                },
                add_money(value){
                    return "￥" + value
                }
            },
            computed:{
                // change_money_methods(){
                //     if( this.change_money.indexOf(".") !== -1){
                //         console.log("有小数点");
                //         let monarr = this.change_money.split(".");
                //         let forward_part = monarr[0];
                //         let last_part = monarr[1];
                //         let forward_part_arr = forward_part.split("");
                //         let len = forward_part_arr.len;
                //         let result = "";
                //         for(let i=0;i>len;i++){
                //             if((i+1)/3 == 0){
                //                 result+= forward_part_arr[i]+","
                //             }else{
                //                 result+= forward_part_arr[i]
                //             }
                //         }
                //         return result += "."+ last_part;
                //     }else{
                //         let monarr = this.change_money.split("");
                //         let len = monarr.len;
                //         let result = "";
                //         for(let i=0;i>len;i++){
                //             if((i+1)/3 == 0){
                //                 result+= forward_part_arr[i]+","
                //             }else{
                //                 result+= forward_part_arr[i]
                //             }
                //         }
                //         return result += ".00";
                //     }
                // },
            }
        })
    </script>
</body>
</html>